@import "_reset.scss";
@import "_jc_tool.scss";
@charset "utf-8";


.wrap{
    width: r(640px);
    height: r(1136px);
    background: $bg;
}
section{
   z-index: 100;
    position: absolute;
    top: r(87px);
    left: 0;
}
.section-all-client{
    display: none;
    width: r(640px);  
    background: white;
    position: absolute;
    top: r(87px);
    left: 0;
}

header{
    font-size: 0;
    position: relative;
    width: r(640px);
    height: r(87px);
    .back-btn{
        position: absolute;
        width: r(60px);
        height: r(60px);
        text-align: center;
        line-height: r(60px);
        padding-top: r(10px);
        top:r(14px);
        left: r(14px);
        img{
            width: r(22px);
            height: r(37px);
        }
    }
    .head-btn{
        width: r(400px);
        height: r(60px);
    }
}
.tab{
    position: absolute;
    top: r(14px);
    left: r(120px);
    width: r(400px);
    height: r(60px);
    border: r(1px) solid #d62d31;
    border-radius: r(5px);
    display: flex;

}
.tab-msg,.tab-client{
    width: r(200px);
    height: r(60px);
    color: #d62d31;
    font-size: r(28px);
    text-align: center;
    line-height: r(60px);
}
.tab-active{
    background: #d62d31;
    color: white;
}
.client-item{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0;
    width: r(640px);
    height: r(131px);
    border-bottom: r(1px) solid #e3e3e3;
    background: white;
    .touxiang{
      
       width: r(92px);
       height: r(92px);
        border-radius: r(50px);
        overflow: hidden;
        .touxiang-img{
             width: 100%;
            height:100%;
        }

    
    }
    .have-msg{
        top:r(13px);
        left: r(102px);
        width: r(32px);
        height: r(32px);
        position: absolute;
    }
    .detail{
        width: r(486px);
        height: r(92px);
        // background: skyblue;
        .cname{
            font-size: r(26px);
            float: left;
        }
        .time{
            font-size: r(24px);
            color: $value-fontColor;
            float: right;
        }
        p{
            font-size: r(24px);
            color: $value-fontColor;
           margin-top: r(48px);
        }
        .daifahuo{
            font-size: r(24px);
            color: $value-fontColor;
            float: right;
            span{
                color: red;
            }
        }
    }
}

.search-bar{
    font-size: 0;
    width: r(600px);
    height: r(60px);
    border: r(1px) solid #c1c1c1;
    border-radius: r(5px);
    margin: r(14px) auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .icon{
        width: r(30px);
        height: r(30px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    #search{
        font-size: r(24px);
        width: r(518px);
        height: r(58px);
        border: none;
        outline: none;
    }
}